<template>
    <div class="zichan">
        <!-- <ziHead :ishead="ishead" @toggleMode="toggleMode"></ziHead> -->
        <div class="zicontent">
            <div class="cbone">
                <span class="cbtit">充币{{ activeIndex }}</span>
                <div class="cbfrom">
                    <span class="chongxuan">选择您要充入的币种</span>
                    <div class="chongselect">
                        <el-select v-model="value" style="width: 100%;" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <span class="chongxuan">选择USDT充币网络</span>
                    <div class="chongselect">
                        <el-select v-model="valuetwo" style="width: 100%;" placeholder="请选择">
                            <el-option
                            v-for="item in optionstwo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <span class="xinxi">重要信息: 您只可发送USDT至此地址，若发送其他数字货币，您将会失去这笔资金。</span>
                </div>
                <div class="saoma">
                    <span class="saotit">扫描二维码或复制下列信息到提币平台</span>
                    <div class="saomiao">
                        <span>提示:暂不支持通过去中心化交易所(DEX)币安智能链 (BSC)、火币生态链 (HECO) 的充值</span>
                       
                    </div>
                </div>
                <div class="chongdi">
                    <div class="chongleft">
                        <span class="saotit">USDT充币地址</span>
                        <div class="cltit">
                            <div class="clleft">
                                <div class="diname">TBpoCCJn3w44yceeLx66ZzKGfg 2NXLgZjY
                                    <img src="@/assets/img/addition/copy.png" alt="" class="copy" @click="copy('TBpoCCJn3w44yceeLx66ZzKGfg')"/>
                                </div>
                                
                            </div>
                            <div class="dizhi">
                                <qrcode-vue :value="valuema" :size="size" :foreground="color" level="H" />
                                <!-- <div id="qrCode" ref="qrCodeDiv" class="tu"></div> -->
                                <!-- <img src="@/assets/img/addition/tu.png" alt="" class="tu"/> -->
                                <span class="dinametwo">USDT地址</span>
                            </div>
                        </div>
                    </div>
                    <div class="chongright">
                        <div class="chongitems">
                            <span class="cnames">最小充币额</span>
                            <span class="cval">000000001USDT</span>
                        </div>
                        <div class="chongitems">
                            <span class="cnames">充币到账</span>
                            <span class="cval">1次网络确认</span>
                        </div>
                        <div class="chongitems">
                            <span class="cnames">提币解锁</span>
                            <span class="cval">1次网络确认</span>
                        </div>
                        <div class="chongitems">
                            <span class="cnames">合约信息</span>
                            <span class="cval">尾号为 gjLi6t</span>
                        </div>
                        <div class="chongitems">
                            *您只能向此地址充入USDTTRC20，充入其他资产将无法找回
                        </div>
                    </div>
                </div>
            </div>

            <div class="zitwo">
                <div class="zitwotit">
                    <span class="jitit">充币记录</span>
                    <span class="jilu">查看历史记录</span>
                </div>
                <div class="ztlist">
                    <div class="zthead">
                        <div class="zones">
                            <span class="rentit">时间</span>
                        </div>
                        <div class="zones" style="width: 30%;">
                            <span class="rentit">充币地址</span>
                        </div>
                        <div class="zones" style="width: 15%;">
                            <span class="rentit">币种</span>
                        </div>
                        <div class="zones" style="width: 15%;">
                            <span class="rentit">充币数量</span>
                        </div>
                        <div class="zones end">
                            <span class="rentit">充币状态</span>
                        </div>

                    </div>
                    <div class="zthead ztitems">
                        <div class="zones">
                            <span class="rentit">2023/10/27 0022:59</span>
                        </div>
                        <div class="zones" style="width: 30%;">
                            <span class="rentit">TBpoCCJn3w44yceeLx66ZzKGfq2NXLgZiY(TRC20)</span>
                        </div>
                        <div class="zones" style="width: 15%;">
                            <span class="rentit">USDT</span>
                        </div>
                        <div class="zones" style="width: 15%;">
                            <span class="rentit">12.001</span>
                        </div>
                        <div class="zones end">
                            <span class="rentit">已转入</span>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue';
import Meun from "@/components/menu/meun.vue";
import ziHead from '@/views/property/components/ziHead.vue';
import QRCode from 'qrcodejs2';
import QrcodeVue from 'qrcode.vue'
const activeIndex = ref("1");
const value = ref("");
const valuetwo = ref("");
const options = ref([{
        value: 'USDT',
        label: 'USDT'
        }, {
        value: 'ETH',
        label: 'ETH'
        }, {
        value: 'BTC',
        label: 'BTC'
        }])
const optionstwo=ref([{
        value: 'USDT-OKTC',
        label: 'USDT-OKTC'
        }, {
        value: 'USDT-ERC20',
        label: 'USDT-ERC20'
        }, {
        value: 'USDT-TRC20',
        label: 'USDT-TRC20'
        }])  
const valuema = ref('http://baidu.com')
const size = ref(70)
const color = ref('#000000')

// import QrcodeVue from 'qrcode.vue'
// export default {
//     name: "Invest",
//     components: { ziHead },
//     data() {
//         return {
//             modal1: false,
//             ishead:1,
//             iseye:false,
//             istou:1,
//             // options: [{
//             //     value: 'USDT',
//             //     label: 'USDT'
//             //     }, {
//             //     value: 'ETH',
//             //     label: 'ETH'
//             //     }, {
//             //     value: 'BTC',
//             //     label: 'BTC'
//             //     }],
//             // optionstwo: [{
//             //     value: 'USDT-OKTC',
//             //     label: 'USDT-OKTC'
//             //     }, {
//             //     value: 'USDT-ERC20',
//             //     label: 'USDT-ERC20'
//             //     }, {
//             //     value: 'USDT-TRC20',
//             //     label: 'USDT-TRC20'
//             //     }],    
//             // value: '',
//             // valuetwo:''
//         };
//     },
//     mounted() {
//         // autofit.init({
//         //   dh: 950,
//         //   dw: 1200,
//         //   el: "#app",
//         //   resize: true
//         // });
//         // let devicewidth = document.documentElement.clientWidth//获取当前分辨率下的可是区域宽度
//         //   let scale = devicewidth / 1920 // 分母——设计稿的尺寸
//         //   document.body.style.zoom = scale//放大缩小相应倍数
//         // },
//         // getma()
//     },
//     setup() {
//         const activeIndex = ref("1");
//         const value = ref("");
//         const valuetwo = ref("");
//         const options = ref([{
//                 value: 'USDT',
//                 label: 'USDT'
//                 }, {
//                 value: 'ETH',
//                 label: 'ETH'
//                 }, {
//                 value: 'BTC',
//                 label: 'BTC'
//                 }])
//         const optionstwo=ref([{
//                 value: 'USDT-OKTC',
//                 label: 'USDT-OKTC'
//                 }, {
//                 value: 'USDT-ERC20',
//                 label: 'USDT-ERC20'
//                 }, {
//                 value: 'USDT-TRC20',
//                 label: 'USDT-TRC20'
//                 }])  
//         // const getma = () =>{
//         //     console.log(QRCode)
//         //     new QRCode(document.getElementById("qrCodeDiv"), {
//         //         text: 'https://www.baidu.com',
//         //         width: 70,
//         //         height: 70,
//         //         colorDark: "#333333", //二维码颜色
//         //         colorLight: "#ffffff", //二维码背景色
//         //         correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
//         //     })
            
//         // }   
//         const valuema = ref('http://baidu.com')
//         const size = ref(200)
//         const color = ref('#000000') 
         
                    

//         return { activeIndex ,options ,optionstwo , value , valuetwo  ,valuema,size,color};
//     },
//     methods:{
//         toggleMode(e){
//             // console.log(e)
//             this.ishead = e
//         },
//         istouClick(e){
//             this.istou = e
//         },
//         copy(wxNumber) {
//           // 存储传递过来的数据
//           let wx = wxNumber;
//           let newInput = document.createElement("input");
//           newInput.value = wx;
//           document.body.appendChild(newInput);
//           newInput.select();
//           document.execCommand("Copy");
//           newInput.remove();
//           this.$message({
//             message: '已复制',
//             type: 'success'
//             });
//         },
//     }
// };
//   const ishead = ref('0');
//   const toggleMode = (e) => {
//     ishead.value = e;
//   };
</script>
  
<style lang="scss" scoped>
.zicontent{
    padding: 20px 20%;
    display: flex;
    flex-direction: column;
    
    .cbone{
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
        .cbtit{
            display: block;
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #000000;
            margin-bottom: 10px;
           
        }
        .cbfrom{
            display: flex;
            flex-direction: column;
            .chongxuan{
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #000000;
                display: block;
                margin-bottom: 20px;
                margin-top: 20px;
            }
            .chongselect{
                width: 50%;
            }
            .xinxi{
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #000000;
                display: block;
                margin-top: 14px;
            }
        }
        .saoma{
            display: flex;
            flex-direction: column;
            margin-top: 50px;
            .saotit{
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #000000;
            }
            .saomiao{
                display: flex;
                margin-top: 14px;
                span{
                    background: #F7F7F7;
                    border-radius: 3px;
                    padding: 16px 22px ;
                    display: inline-block;
                }
                
            }
        }
        .chongdi{
            display: flex;
            flex-direction: row;
            margin-top: 22px;
            .chongleft{
                width: 45%;    
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                .saotit{
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #000000;
                }
                .cltit{
                    background: #F7F7F7;
                    border-radius: 3px;
                    padding: 16px 22px;
                    margin-top: 14px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .clleft{
                        width: 50%;
                        display: flex;
                        flex-direction: row;

                    }
                    .copy{
                        width: 10px;
                        height: 10px;
                        margin-left: 10px;
                        cursor: pointer;
                    }
                    .diname{
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #000000;
                        display: inline;
                    }
                    .dizhi{
                        margin-left: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        .tu{
                           width: 70px;
                           height: 70px; 
                        }
                        .dinametwo{
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #000000;
                            display: inline-block;
                            margin-top: 5px;
                        }
                    }

                }
            }
            .chongright{
                width: 45%;
                margin-left: auto;
                padding: 25px 15px;
                background: #F7F7F7;
                border-radius: 7px;
                .chongitems{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 14px;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #8B8B8B;
                    .cnames{
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #8B8B8B;
                    }
                    .cval{
                        margin-left: auto;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #000000;
                    }
                }
                .chongitems:last-child{
                    margin-bottom: 0;
                }
            }
        }
    }

    .zitwo{
        // border: 1px solid #EEEEEE;
        border-radius: 3px;
        margin-top: 27px;
        .zitwotit{
            // font-size: 16px;
            // font-family: Source Han Sans CN;
            // font-weight: 400;
            // color: #000000;
            // // margin: 15px 0;
            // // padding: 15px 24px;
            // border-bottom: 1px solid #EEEEEE;
            // display: flex;
            // flex-direction: row;
           
            // margin: 15px 0;
            padding: 15px 0px;
            border-bottom: 1px solid #EEEEEE;
            display: flex;
            flex-direction: row;
            align-items: center;
            .jitit{
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #000000;
            }
            .jilu{
                margin-left: auto;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #3976E4;
                cursor: pointer;
            }
            .ztwoitems{
                height: 100%;
                margin-right: 30px;
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #999999;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                padding: 16px 0;
                cursor: pointer;
            }
            .renxian{
                position: absolute;
                width: 100%;
                bottom: 0;
                left: 0;
                height: 1px;
                background: #030000;
                display: none;
            }

            .ztacitve{
                font-weight: 500;
                color: #000000;
                .renxian{
                    display: inline-block;

                }
            }
        }
        .ztlist{
            // padding:0 15px;
            padding: 30px 0;
            .zthead{
                display: flex;
                flex-direction: row;
                margin-bottom: 38px;
                .zones{
                    width: 20%;
                    display: flex;
                    flex-direction: row;
                    padding: 0 8px 0 0;
                }
                .zonetwos{
                    width: 12.5%;
                    display: flex;
                    flex-direction: row;
                }
                .end{
                    justify-content: flex-end;
                    .rentit{
                        padding-right: 3px;
                    }
                }
                .rentit{
                    font-size: 13px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #8B8B8B;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                }
                .hong{
                    font-weight: 400;
                    color: #EF5252 !important;
                }
                .usdticon{
                    width: 14px;
                    height: 14px;
                    margin-right: 5px;
                }
                .center{
                    align-items: center;
                }
                .shuhui{
                    width: 47px;
                    height: 23px;
                    border: 1px solid #030000;
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 9px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #000000;
                }
                .lv{
                    color: #31BD65 !important;
                }
            }
            .ztitems{
                display: flex;
                flex-direction: row;
                align-items: center;
                .rentit{
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #000000;
                }
                .end{
                    justify-content: flex-end;
                    .rentit{
                        padding-right: 0px;
                    }
                }
            }
            .ztitems:last-child{
                border-bottom: none;
            }
        }
    }
}
.xiaclass{
    position: relative;
    top: 4px !important;
}
</style>